<template>
  <el-dialog
    v-if="dialogVisible"
    title="提示"
    :visible="dialogVisible"
    :width="width"
    :top="top"
    :fullscreen="IsFullscreen"
    :before-close="handleCloseBefore"
    custom-class="dialog_box"
    destroy-on-close
    :close-on-click-modal="closeClickModal"
    :append-to-body="appendToBody">
    <div slot="title">
      <span>{{ title }}</span>
      <i class="el-icon-copy-document el-dialog-max" @click="IsFullscreen = !IsFullscreen" />
    </div>
    <div class="dialog-pr" :style="IsFullscreen ? `height: calc(100vh - 50px)` : `height: calc(${height} - 50px)`">
      <component
        :is="activeItem"
        v-bind="$attrs"
        :name="name"
        :mark="mark"
        :reset="reset"
        :dialog-data="dialogData"
        :is-full-screen="IsFullscreen"
        @handleClose="handleClose"
        v-on="$listeners" />
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {
    DialogDemo: () => import('@/components/Business/DialogDemo.vue'),
    FilePreview: () => import('@/components/Business/FilePreview.vue'), // 附件预览
    PdcaReport: () => import('@/components/Business/PdcaReport.vue'), // 日报弹框
    SingleEditBoard: () => import('@/components/Business/SingleEditBoard.vue'), // 简单编辑弹框
    PicBed: () => import('@/components/Business/PicBed.vue'), // 图床
  },
  props: {
    width: {
      type: String,
      default: '80%'
    },
    top: {
      type: String,
      default: '5%'
    },
    height: {
      type: String,
      default: '80%'
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: ''
    },
    closeClickModal: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      title: '',
      IsFullscreen: false,
      dialogVisible: false,
      activeItem: '',
      mark: '',
      reset: ''
    }
  },
  methods: {
    handleCloseBefore() {
      // 需要优化
      if (this.reset === 'resetPast') {
        this.$emit('reset')
        this.dialogVisible = false
      } else if (this.reset === 'refresh') {
        this.$emit('reset')
        this.dialogVisible = false
      } else {
        this.dialogVisible = false
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleShow(type, title = '', mark, reset = undefined) {
      this.dialogVisible = true
      this.title = title
      this.mark = mark
      this.reset = reset
      this.changeComponent(type)
    },
    changeComponent(name) {
      this.activeItem = name
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .__view {
  width: 100% !important;
}

.el-dialog-max {
  position: absolute;
  top: 20px;
  right: 45px;
  padding: 0px;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
  color: #909399;

  :hover {
    color: #409eff;
  }
}

::v-deep .dialog_box {
  display: flex;
  flex-direction: column;
}

::v-deep .el-dialog {
  margin-bottom: 0px !important;
  border-radius: 4px;
}

::v-deep .el-dialog__header {
  flex-basis: 0;
  background-color: #e6eff7;
  height: 50px;
  text-align: left;
  border-radius: 4px 4px 0px 0px;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
  /*padding-top: 5px;
  padding-bottom: 0px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;*/
}

.dialog-pr {
  position: relative;
}
</style>
